<template>
	<view>
		<view style="padding: 40rpx;">
			<u-input v-model="mobile"  type="number" :border="false" maxlength="11"
				placeholder="请输入手机号" height="80" :trim="true" />
		</view>
		<view style="background-color: #f5f5f5;width: 100%;height: 10rpx;"></view>
		<view style="padding: 40rpx 40rpx; padding-bottom: 200rpx;">
			<view style="width: 50%;">
				<u-tabs gutter="0" :show-bar="false" :list="type" :is-scroll="false" :current="current" @change="change" bar-width="100"></u-tabs>
			</view>
			<view v-if="current == 0">
				<view style="display: flex;flex-direction: row;flex-wrap: wrap; margin-top: 40rpx;">
					<view v-for="(item,index) in data.slow.server" :key="index" style="margin-bottom: 30rpx;margin-left: 14rpx;overflow: hidden;" @click="selectServer('slow', index)">
						<view v-if="item.default == 1" style="display: flex; flex-direction: column; justify-content: center;align-items: center;width: 200rpx;height: 160rpx;border: 4rpx solid #2979ff;border-radius: 20rpx;position: relative;overflow: hidden;">
							<text style="color: #000;font-size: 30rpx;margin-bottom: 10rpx;">{{item.value}}元</text>
							<text style="color: #999999;font-size: 26rpx;">售价:￥{{item.payment}}</text>
							<view style="position: absolute;bottom: 0rpx;right: -2rpx;width: 100rpx;height: 100rpx;">
								<u-image width="100%" height="100%" src="/static/jiaobiao.png"></u-image>
							</view>
						</view>
						<view v-if="item.default == 0" style="display: flex; flex-direction: column; justify-content: center;align-items: center;width: 200rpx;height: 160rpx;border: 2rpx solid #999;border-radius: 20rpx;">
							<text style="color: #000;font-size: 30rpx;margin-bottom: 10rpx;">{{item.value}}元</text>
							<text style="color: #999999;font-size: 26rpx;">售价:￥{{item.payment}}</text>
						</view>
					</view>
				</view>
				<view>
					<view style="margin-bottom: 20rpx;font-size: 28rpx; margin-top: 40rpx;">温馨提示：</view>
					<view class="wenxintishi">
						1.慢充话费与营业厅充值一样，只是到账时间稍长。充值过程中可能出现分批到账的情况，但是总金额不会少，请耐心等待，如72小时未到账请联系客服查询。
					</view>
					<view class="wenxintishi">
						2.此业务为话费慢充，<text
							style="color: #d90209;">平均4-5小时到账，最晚72小时内到账，急用勿拍（急用请使用快充通道）。</text>月末月初为充值高峰期，话费可能会有延迟，请您耐心等待或在48小时后联系客服确认订单状态。
					</view>
					<view class="wenxintishi">
						3.由于优惠有限，<text
							style="color: #d90209;">每个手机号30天内仅支持2次充值（不限金额）</text>，如1号充值1单，29号充值1单，第三单需要在第31号才能充值，请根据自己话费使用情况选择对应金额。
					</view>
					<view class="wenxintishi">
						4.目前仅支持（移动、联通、电信三网号段），165、167、170、171、162等虚拟号段暂不支持充值，携号转网号码暂不能充值，否则损失自负无法退款。
					</view>
					<view class="wenxintishi">
						5.停机号码需要额外补缴欠费后，慢充话费才能到账。<text style="color: #d90209;">此服务为虚拟充值类服务，无特殊情况不支持退款</text>
					</view>
					<view class="wenxintishi">
						6.空号、错号充值后不支持退款，<text
							style="color: #d90209;">请您务必核对确认号码无误后再进行充值</text>。非空号欠费可充，欠费1个月导致空号的不能充值，损失自负无法退款。
					</view>
					<view class="wenxintishi">
						7.本充值业务不提供发票。如需发票请在运营商手机客户端储开取电子发票，也可以凭身份证到运营商实体营业厅打印发票。
					</view>
					<view class="wenxintishi">
						8.如遇系统维护充值失败，将72小时后原路退款到付款账户。
					</view>
				</view>
			</view>
			<view v-if="current == 1">
				<view style="display: flex;flex-direction: row;flex-wrap: wrap;margin-top: 40rpx;">
					<view v-for="(item,index) in data.fast.server" :key="index" style="margin-bottom: 30rpx;margin-left: 14rpx;overflow: hidden;" @click="selectServer('fast', index)">
						<view v-if="item.default == 1" style="display: flex; flex-direction: column; justify-content: center;align-items: center;width: 200rpx;height: 160rpx;border: 4rpx solid #2979ff;border-radius: 20rpx;position: relative;overflow: hidden;">
							<text style="color: #000;font-size: 30rpx;margin-bottom: 10rpx;">{{item.value}}元</text>
							<text style="color: #999999;font-size: 26rpx;">售价:￥{{item.payment}}</text>
							<view style="position: absolute;bottom: 0rpx;right: -2rpx;width: 100rpx;height: 100rpx;">
								<u-image width="100%" height="100%" src="/static/jiaobiao.png"></u-image>
							</view>
						</view>
						<view v-if="item.default == 0" style="display: flex; flex-direction: column; justify-content: center;align-items: center;width: 200rpx;height: 160rpx;border: 2rpx solid #999;border-radius: 20rpx;">
							<text style="color: #000;font-size: 30rpx;margin-bottom: 10rpx;">{{item.value}}元</text>
							<text style="color: #999999;font-size: 26rpx;">售价:￥{{item.payment}}</text>
						</view>
					</view>
				</view>
				<view>
					<view style="margin-bottom: 20rpx;font-size: 28rpx; margin-top: 40rpx;">温馨提示：</view>
					<view class="wenxintishi">
						1.一般充值1-30分钟内到账，如遇月末月初充值高峰期或系统更新期会稍有延迟。
					</view>
					<view class="wenxintishi">
						2.目前支持移动、联通、电信三网号段，<text style="color: #d90209;">携号转网号码暂不能充值</text>，否则损失自负无法退款。
					</view>
					<view class="wenxintishi">
						3.<text style="color: #d90209;">此服务为虚拟充值类服务，无特殊情况不支持退款</text>。
					</view>
					<view class="wenxintishi">
						4.<text style="color: #d90209;">空号、错号充值后不支持退款或修改</text>，请您务必核对确认号码无误后再进行充值。非空号欠费可充，
					</view>
					<view class="wenxintishi">
						5.移动会不定期维护网络，维护期间可能会造成延后到账，请耐心等待。维护网络期间如造成无法充值或手机账号停机欠费充值失败，款项将原路退回。
					</view>
					<view class="wenxintishi">
						6.本充值业务不提供发票。如需发票请在运营商手机客户端储开取电子发票，也可以凭身份证到运营商实体营业厅打印发票。
					</view>
					<view class="wenxintishi">
						7.如遇系统维护充值失败，将72小时后原路退款到付款账户。
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>实付款</text>
				<text class="price-tip">￥</text>
				<text class="price">{{pay_price}}</text>
			</view>
			<text class="submit" @click="rechangeCreateOrder">立即充值</text>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				mobile: '',
				customStyle: {
					'fontSize': "50rpx"
				},
				type: [{
					name: '话费慢充',
				}, {
					name: '话费快充'
				}],
				current: 0,
				pay_price: 0,
				data: [],
				rechangeType: "slow",
				amount: 0
			}
		},
		onLoad() {
			let that = this;
			this.$u.api.rechangeMobileConfig({
			}).then(res => {
				for(let i = 0; i < res.slow.server.length; i++){
					if(res.slow.server[i].default == 1){
						that.pay_price = res.slow.server[i].payment
						that.amount = res.slow.server[i].value
					}
				}
				that.data = res
			})
		},
		methods: {
			change(index) {
				let that = this
				this.current = index
				
				if(index == 0){
					this.rechangeType = 'slow'
					for(let i = 0; i < this.data.slow.server.length; i++){
						if(this.data.slow.server[i].default == 1){
							that.pay_price = this.data.slow.server[i].payment
							that.amount = this.data.slow.server[i].value
						}
					}
				}else if(index == 1){
					this.rechangeType = 'fast'
					for(let i = 0; i < this.data.fast.server.length; i++){
						if(this.data.fast.server[i].default == 1){
							that.pay_price = this.data.fast.server[i].payment
							that.amount = this.data.fast.server[i].value
						}
					}
				}
			},
			selectServer(type, index){
				let that = this;
				if(type == 'slow'){
					that.rechangeType = "slow"
					for(let i = 0; i < that.data.slow.server.length; i++){
						that.data.slow.server[i].default = 0
						if(index == i){
							that.data.slow.server[i].default = 1
							that.pay_price = that.data.slow.server[i].payment
							that.amount = that.data.slow.server[i].value
						}
					}
				}else if(type == 'fast'){
					that.rechangeType = "fast"
					for(let i = 0; i < that.data.fast.server.length; i++){
						that.data.fast.server[i].default = 0
						if(index == i){
							that.data.fast.server[i].default = 1
							that.pay_price = that.data.fast.server[i].payment
							that.amount = that.data.fast.server[i].value
						}
					}
				}
				
			},
			rechangeCreateOrder(){
				let that = this;
				
				that.$u.api.rechangeCreateOrder({
					mobile: that.mobile,
					amount: that.amount,
					type: that.rechangeType
				}).then(res => {
					that.$u.route({
						url: "pages/rechange/pay",
						params:{data: JSON.stringify(res)}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.wenxintishi {
		color: #999;
		font-size: 24rpx;
		margin-bottom: 20rpx;
	}
	.footer{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 90upx;
		justify-content: space-between;
		font-size: 30upx;
		background-color: #fff;
		z-index: 998;
		color: $font-color-base;
		box-shadow: 0 -1px 5px rgba(0,0,0,.1);
		.price-content{
			padding-left: 30upx;
		}
		.price-tip{
			color: $base-color;
			margin-left: 8upx;
		}
		.price{
			font-size: 36upx;
			color: $base-color;
		}
		.submit{
			display:flex;
			align-items:center;
			justify-content: center;
			width: 280upx;
			height: 100%;
			color: #fff;
			font-size: 32upx;
			background-color: $base-color;
		}
	}
</style>
